<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">

        <ui:define name="body">
            <script  type="text/javascript" src="media/js/autoNumeric.js"></script>

            <div class="section">
                <h1>Venda</h1>
                <h:form id="saleForm">
                    <p:growl id="msg"  life="3000"/>

                    <div class="container_24 clearfix">
                        <p:wizard id="wizardVenda"  widgetVar="wiz" showNavBar="false" nextLabel="Próximo" backLabel="Voltar"  >  
                            s
                            <p:tab id="Imóvel" title="Imóvel" >
                                <div class="clear" />
                                <p:panel header="Venda" styleClass="grid_24 clearfix " >

                                    <p:outputLabel value="Empreendimento:" styleClass="grid_4 enterpriseLabel" />
                                    <p:autoComplete styleClass="grid_18" value="#{managerEditSale.enterprise}" id="enterpriseAutocomplete" completeMethod="#{managerEditSale.autocompleteEnterprise}"  
                                                    var="p" dropdown="true" itemLabel="#{p.name}" itemValue="#{p}" converter="#{autocompleteconverter}" forceSelection="true">
                                        <p:ajax event="itemSelect" update=":saleForm:blockAutocomplete, :saleForm:lotAutocomplete"  />
                                    </p:autoComplete>
                                    <div class="clear-both"/>

                                    <p:outputLabel value="Corretor:" styleClass="grid_4" />
                                    <p:inputText styleClass="grid_18" disabled="true" value="#{managerEditSale.corrector.name}" />
                                    <div class="clear-both"/>

                                    <p:outputLabel value="Quadra:" styleClass="grid_4" />
                                    <div class="grid_6">
                                        <p:selectOneMenu id="blockAutocomplete" styleClass="alpha" value="#{managerEditSale.block}" >  
                                            <f:selectItem itemLabel="" itemValue="" />  
                                            <f:selectItems value="#{managerEditSale.selectTypeBlock()}" /> 
                                            <p:ajax update="lotAutocomplete"  />
                                        </p:selectOneMenu> 
                                    </div>

                                    <p:outputLabel value="Lote:" styleClass="grid_4" />
                                    <div class="grid_8">
                                        <p:selectOneMenu id="lotAutocomplete" value="#{managerEditSale.lot.id}" >  
                                            <f:selectItem itemLabel="" itemValue="" />  
                                            <f:selectItems value="#{managerEditSale.lotsByEnterpriseAndBlock()}" /> 
                                            <p:ajax update="info, paymentFormPanel" listener="#{managerEditSale.loadLot()}"  />
                                        </p:selectOneMenu> 
                                    </div>
                                    <div class="clear"/>
                                    <div class="clear"/>

                                    <p:panel id="info" header="Informações sobre o Lote" styleClass="grid_24 clearfix " >
                                        <div class="labelsInfo">
                                            <div class="clear"/>
                                            <p:outputLabel value="Nº do Lote: " styleClass="grid_6 fieldValue" />
                                            <p:outputLabel value="#{managerEditSale.lot.num}" />
                                            <div class="clear"/>
                                            <p:outputLabel value="Dimensão: " styleClass="grid_6 fieldValue" />
                                            <p:outputLabel value="#{managerEditSale.dimensaoDoLote()}" />
                                            <div class="clear"/>
                                            <p:outputLabel value="Área: " styleClass="grid_6 fieldValue" />
                                            <p:outputLabel value="#{managerEditSale.lot.area}" />
                                            <div class="clear"/>
                                            <p:outputLabel value="Tipo: " styleClass="grid_6 fieldValue" />
                                            <p:outputLabel value="#{managerEditSale.lot.typeLot.name}" />
                                        </div>
                                        <div id="infoMap" >
                                            <div class="grid_7">
        <!--                                        <p:gmap center="#{managerEnterprise.centerMap}" id="gmapInfo"
                                                        zoom="18" type="HYBRID" 
                                                        style="width:300px;height:200px" model="#{managerEnterprise.polygonModel}">
        
                                                </p:gmap>-->
                                            </div>
                                        </div>
                                    </p:panel>
                                    <div class="clear"/>
                                    <div class="clear"/>

                                    <p:panel id="paymentFormPanel" header="Forma de Pagamento" styleClass="grid_24 clearfix " >
                                        <div class="clear"/>
                                        <p:selectOneRadio styleClass="grid_7 itensLeft" id="paymentForm" layout="pageDirection" value="#{managerEditSale.paymentType}">
                                            <f:selectItems value="#{managerEditSale.paymentTypes}" />
                                            <p:ajax event="change" process="@this" update=":saleForm:paymentFormPanel" />
                                        </p:selectOneRadio>

                                        <p:panel id="values" header="Valores" style="float: right" styleClass="grid_16 clearfix ">
                                            <p:panel id="avista" styleClass="withoutBorder" visible="#{managerEditSale.paymentType.isAtSight()}">
                                                <p:outputLabel value="Á Vista:" styleClass="grid_5" />
                                                <p:inputText styleClass="grid_18" disabled="true" value="#{managerEditSale.lot.sees}" >
                                                    <f:convertNumber pattern="#,###,##0.00"/>
                                                </p:inputText>
                                                <div class="clear-both"/>                              
                                                <p:outputLabel value="Desconto:" styleClass="grid_4 discountLabel" />
                                                <p:inputText  styleClass="grid_13" value="#{managerEditSale.discount}" >
                                                    <p:ajax event="keyup" process="@this" update="totalSighting" listener="#{managerEditSale.totalValueSees()}" />
                                                </p:inputText>
                                                <div class="grid_5 alpha">
                                                    <p:selectOneMenu  value="#{managerEditSale.discountType}"  styleClass="grid_24">  
                                                        <f:selectItems value="#{managerEditSale.discountTypes}"  /> 
                                                        <p:ajax update="totalSighting" listener="#{managerEditSale.totalValueSees()}"  />
                                                    </p:selectOneMenu> 
                                                </div>
                                                <div class="clear-both"/>                              
                                                <p:outputLabel value="Valor Total:"  styleClass="grid_5 totalValueLabel" />
                                                <p:inputText styleClass="grid_18" disabled="true" id="totalSighting" value="#{managerEditSale.totalSighting}">
                                                    <f:convertNumber pattern="#,###,##0.00"/>
                                                </p:inputText>
                                            </p:panel> 

                                            <p:panel id="aprazo" styleClass="withoutBorder inputsPaymentForm"  visible="#{managerEditSale.paymentType.isInstallment()}">
                                                <p:outputLabel value="Entrada:" styleClass="grid_4" />
                                                <p:inputText styleClass="grid_18" disabled="true" value="#{managerEditSale.beginValue}" >
                                                    <f:convertNumber pattern="#,###,##0.00"/>
                                                </p:inputText>
                                                <div class="clear-both"/>                              
                                                <p:outputLabel value="Parcelas" styleClass="grid_4" />

                                                <p:selectOneRadio id="options" converter="#{autocompleteconverter}"  layout="pageDirection" value="#{managerEditSale.valueInterestParcel}" styleClass="grid_18">
                                                    <f:selectItems value="#{managerEditSale.parcelas()}" var="i" itemLabel="#{managerEditSale.parcelLabels(i)}" itemValue="#{i}" />
                                                    <p:ajax event="change" process="@this" />
                                                </p:selectOneRadio>
                                            </p:panel> 

                                            <p:panel id="personalizada" styleClass="withoutBorder inputsPaymentForm"  visible="#{managerEditSale.paymentType.isCustom()}">
                                                <p:outputLabel value="Entrada:" styleClass="grid_4" />
                                                <p:inputText styleClass="grid_18" value="#{managerEditSale.beginValueCustom}"
                                                             onkeypress="jQuery(this).autoNumeric({aSign:'R$ ', aSep: '.', aDec: ','} );">
                                                    <p:ajax event="blur" process="personalizada" listener="#{managerEditSale.calcCustomValues()}" update="qtdCustom, totalCustom" />
                                                    <f:convertNumber type="currency"  locale="pt,BR"   />
                                                </p:inputText>
                                                <div class="clear-both"/>    
                                                <p:outputLabel value="Qtde parcelas:" styleClass="grid_4" />
                                                <p:inputMask mask="?9999" placeHolder="" styleClass="grid_18" value="#{managerEditSale.qtde}" >
                                                    <p:ajax event="keyup" process="personalizada" listener="#{managerEditSale.calcCustomValues()}" update="qtdCustom, totalCustom" />
                                                </p:inputMask>
                                                <div class="clear-both"/>                              
                                                <p:outputLabel value="Juros:" styleClass="grid_4" />
                                                <p:selectBooleanButton value="#{managerEditSale.hasInterest}" onLabel="Sim" offLabel="Não" styleClass="grid_4" >
                                                    <p:ajax process="personalizada" listener="#{managerEditSale.calcCustomValues()}" update="qtdCustom, totalCustom, customInterest" />  
                                                </p:selectBooleanButton>
                                                <p:inputText styleClass="grid_14" 
                                                             onkeypress="jQuery(this).autoNumeric({pSign: 's',aSign: '%', aSep: '.', aDec: ','} );"
                                                             value="#{managerEditSale.juros}"  id="customInterest" disabled="#{managerEditSale.hasInterest eq false}">
                                                    <f:convertNumber type="percent"  locale="pt,BR"  />
                                                    <p:ajax event="keyup" process="personalizada" listener="#{managerEditSale.calcCustomValues()}" update="qtdCustom, totalCustom" />
                                                </p:inputText>
                                                <div class="clear-both"/>                              
                                                <p:outputLabel value="Valor da Parcela:" styleClass="grid_4" />
                                                <p:inputText styleClass="grid_18" id="qtdCustom" disabled="true" value="#{managerEditSale.parcelValue}" >
                                                    <f:convertNumber pattern="#,###,##0.00"/>
                                                </p:inputText>
                                                <div class="clear-both"/>
                                                <p:outputLabel value="Total:" styleClass="grid_4" />
                                                <p:inputText styleClass="grid_18" id="totalCustom" disabled="true" value="#{managerEditSale.totalValueCustom}" >
                                                    <f:convertNumber pattern="#,###,##0.00"/>
                                                </p:inputText>
                                                <div class="clear-both"/>    

                                                <p:defaultCommand scope="paymentFormPanel" target="next" />

                                            </p:panel> 

                                        </p:panel>

                                    </p:panel>

                                    <div class="clear"/>                          

                                </p:panel>
                                <style>
                                    .classPrev{display: none}
                                </style>
                            </p:tab>
                            <!-- Cliente -->
                            <p:tab title="Cliente" id="client" >
                                <ui:include src="editsale_customer.xhtml" />
                            </p:tab>

                            <p:tab title="Informações" id="moreInfo" >
                                <ui:include src="editsale_more.xhtml" />
                            </p:tab>
                            <p:tab title="Confirmação"  id="infoTab" >
                                <ui:include  src="editsale_info.xhtml" />
                                <style>
                                    .classNext{display: none}
                                </style>

                            </p:tab>



                        </p:wizard>

                        <p:commandButton styleClass="classPrev" value="Voltar" icon="ui-icon-arrowthick-1-w" process="@form" onclick="wiz.back();" />

                        <p:commandButton styleClass="classNext" id="next" value="Próximo" style="float: right" icon="ui-icon-arrowthick-1-e" update="@this, msg" oncomplete="wiz.next();" />
                    </div>

                </h:form>
            </div>
        </ui:define>
    </ui:composition>
</html>
